<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻资讯</title>
        <!-- 引入bootstrap -->
        <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

        <!-- 引入animate.css 动画效果 -->
        <link rel="stylesheet" href="./assets/css/animate.min.css" />
    
        <!-- 重置样式 -->
        <link rel="stylesheet" href="./assets/css/reset.css" />
    
        <!-- 公共样式 引入的是一个 less文件 -->
        <link rel="stylesheet/less" href="./assets/css/common.less" />
    
        <!-- 首页样式 -->
        <link rel="stylesheet/less" href="./assets/css/index3.less" />
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="list">
                <a class="logo wow fadeInUp" href="javascript:void(0)">LOGO</a>
                <div class="item wow fadeInUp" data-wow-delay="100ms">
                    欢迎访问帝润锻造有限责任公司！ <span>Tel: 186-1234-5678</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 导航 -->
    <nav class="navbar navbar-default">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="navbar-nav">
                    <li><a class="wow fadeInUp" data-wow-delay="0ms" href="./index.html">网站首页</a></li>
                    <li><a class="wow fadeInUp" data-wow-delay="100ms" href="./index2.html">关于我们</a></li>
                    <li><a class="wow fadeInUp" data-wow-delay="200ms" href="javascript:void(0)">新闻资讯</a></li>
                    <li><a class="wow fadeInUp" data-wow-delay="400ms" href="javascript:void(0)">产品中心</a></li>
                    <li><a class="wow fadeInUp" data-wow-delay="500ms" href="javascript:void(0)">工厂车间</a></li>
                    <li><a class="wow fadeInUp" data-wow-delay="600ms" href="javascript:void(0)">在线招聘</a></li>
                    <li><a class="wow fadeInUp" data-wow-delay="700ms" href="javascript:void(0)">在线留言</a></li>
                    <li><a class="wow fadeInUp" data-wow-delay="800ms" href="javascript:void(0)">联系我们</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- about -->
    <div class="about">
        <img src="./assets/images/2about.png" class="img-responsive">
    </div>

    <!-- 新闻 -->
    <div class="xinwen">
        <div class="container">
            <div class="list">
                <div class="item">
                    <div class="avatar"><img src="./assets/images/news.jpg" class="img-responsive"></div>
                    <div class="content">
                        <h1>新闻新闻新闻新闻新闻新闻</h1>
                        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
                    </div>
                    <div class="time">
                        <h1>05</h1>
                        <p>2022/08</p>
                    </div>
                </div>

                <div class="item">
                    <div class="avatar"><img src="./assets/images/news.jpg" class="img-responsive"></div>
                    <div class="content">
                        <h1>新闻新闻新闻新闻新闻新闻</h1>
                        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
                    </div>
                    <div class="time">
                        <h1>05</h1>
                        <p>2022/08</p>
                    </div>
                </div>

                <div class="item">
                    <div class="avatar"><img src="./assets/images/news.jpg" class="img-responsive"></div>
                    <div class="content">
                        <h1>新闻新闻新闻新闻新闻新闻</h1>
                        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
                    </div>
                    <div class="time">
                        <h1>05</h1>
                        <p>2022/08</p>
                    </div>
                </div>

                <div class="item">
                    <div class="avatar"><img src="./assets/images/news.jpg" class="img-responsive"></div>
                    <div class="content">
                        <h1>新闻新闻新闻新闻新闻新闻</h1>
                        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
                    </div>
                    <div class="time">
                        <h1>05</h1>
                        <p>2022/08</p>
                    </div>
                </div>

                <div class="item">
                    <div class="avatar"><img src="./assets/images/news.jpg" class="img-responsive"></div>
                    <div class="content">
                        <h1>新闻新闻新闻新闻新闻新闻</h1>
                        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
                    </div>
                    <div class="time">
                        <h1>05</h1>
                        <p>2022/08</p>
                    </div>
                </div>

                <div class="item">
                    <div class="avatar"><img src="./assets/images/news.jpg" class="img-responsive"></div>
                    <div class="content">
                        <h1>新闻新闻新闻新闻新闻新闻</h1>
                        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
                    </div>
                    <div class="time">
                        <h1>05</h1>
                        <p>2022/08</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


        <!-- 底部 -->
        <footer class="footer">
            <div class="container">
                <div class="list">
                    <div class="item">首页</div>
                    <span>▏</span>
                    <div class="item">我们</div>
                    <span>▏</span>
                    <div class="item">新闻</div>
                    <span>▏</span>
                    <div class="item">产品</div>
                    <span>▏</span>
                    <div class="item">车间</div>
                    <span>▏</span>
                    <div class="item">招聘</div>
                    <span>▏</span>
                    <div class="item">联系</div>
                    <span>▏</span>
                    <div class="item">留言</div>
                </div>
                <div class="box">版权所有：上海市锻造有限责任公司</div>
                <div class="content">版权所有：XXX科技</div>
            </div>
        </footer>
</body>
</html>

<!-- 引入jquery -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 引入bootstrap js  -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入less -->
<script src="./assets/js/less.min.js"></script>

<!-- 引入懒加载插件 -->
<script src="./assets/js/wow.min.js"></script>

<!-- 滚动视觉差插 -->
<script src="./assets/js/parallax.min.js"></script>

<!-- 制作懒加载效果 -->
<script>
    // 实例化懒加载动画效果
    new WOW().init();

</script>